$global-bgc = #eee

$cal-width = 400px
$cal-box-shadow = -8px -8px 16px -10px rgba(255,255,255,1), 8px 8px 16px -10px rgba(0,0,0,0.15)

$output-font-size = 48px
$output-font-color = #666
$output-padding = 0 20px

$button-height = 80px
$button-width = 80px
$button-font-color = #999
$button-font-family = Helvetica
$button-font-size = 24px
$button-linear-gradient = linear-gradient(135deg,rgb(230,230,230) 0%,rgb(246,246,246) 100%)
$button-box-shadow = -4px -4px 10px -8px rgb(255,255,255),4px 4px 10px -8px rgb(0,0,0,0.3)
$button-box-shadow-active = -4px -4px 10px -8px rgb(255,255,255) inset,4px 4px 10px -8px rgb(0,0,0,0.3) inset

times(a,b)
    a * b

html,body
    margin 0
    padding 0
    min-height 100%
    background-color #eee
    display flex
    justify-content center
    align-items  center
#calculator
    width $cal-width
    display flex
    flex-wrap wrap
    background-color $global-bgc
    box-shadow $cal-box-shadow
    padding 24px
    border-radius 20px
    .cal-output
        box-sizing border-box
        flex-basis $cal-width
        height $button-height
        line-height $button-height
        font-size $output-font-size
        font-family $button-font-family
        padding $output-padding
        color $output-font-color
        text-align right 
    .cal-button
        // width $button-width
        height $button-height
        flex 1 0 $button-width
        font-size $button-font-size
        margin 8px
        display block
        border 0
        background $button-linear-gradient
        box-shadow $button-box-shadow
        outline none
        border-radius 50%
        color $button-font-color
        font-family $button-font-family, sans-serif
    .cal-button:active
        box-shadow $button-box-shadow-active 
    .cal-button-zero
        flex 2 0 times(2,$button-width)
        margin 8px 16px
